<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Function to draw an arrow
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        
        // Main line
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();

        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
    }
    
    // Clear canvas
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Style settings to mimic the hand-drawn look
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.font = "bold 22px 'Comic Sans MS', cursive, sans-serif";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Define origin
    const ox = 200;
    const oy = 250;

    // Draw coordinate axes
    // x-axis (upwards)
    drawArrow(ctx, ox, oy, ox, 80);
    ctx.fillText('x', ox, 70);

    // z-axis (right)
    drawArrow(ctx, ox, oy, 400, oy);
    ctx.fillText('z', 415, oy);

    // y-axis (out of page, down-left)
    drawArrow(ctx, ox, oy, 100, 300);
    ctx.fillText('y', 90, 310);

    // Define and draw points P and Q
    const p_x = ox;
    const p_y = 150;
    const q_x = 320;
    const q_y = oy;

    // Point P
    ctx.beginPath();
    ctx.arc(p_x, p_y, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.textAlign = 'right';
    ctx.fillText('P', p_x - 15, p_y);
    
    // Point Q
    ctx.beginPath();
    ctx.arc(q_x, q_y, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.textAlign = 'center';
    ctx.fillText('Q', q_x, q_y - 20);

    // Draw labels for distances
    ctx.textAlign = 'left';
    ctx.fillText('b', p_x + 10, (p_y + oy) / 2);
    
    ctx.textAlign = 'center';
    ctx.fillText('vt', (q_x + ox) / 2, q_y + 20);

    // Draw velocity vector v
    const v_start_x = 420;
    const v_end_x = 470;
    drawArrow(ctx, v_start_x, oy, v_end_x, oy);
    ctx.fillText('v', (v_start_x + v_end_x) / 2, oy - 20);

    // Draw Figure Caption
    ctx.font = "20px 'Times New Roman', serif";
    ctx.fillText('Fig. 5.10', 250, 370);

</script>
</body>
</html>